<!doctype html>
<html>
<head>
	<meta charset="utf-8" />
	<title>按钮|BUTTON-MUI</title>
	<link href="../theme/doc.css" rel="stylesheet" type="text/css" />
	<link href="../theme/mui.css" rel="stylesheet" type="text/css" />
	<script src="../theme/jquery.js" type="text/javascript"></script>
	<script src="../theme/mui.js" type="text/javascript"></script>
	<script src="../theme/doc.js" type="text/javascript"></script>
</head>
<body>
<div class="doc">
	<h1>按钮</h1>
	<p>
		在HTML/DOM中，表单项属性 
		<code>type="submit"</code>、 
		<code>type="reset"</code>、
		<code>type="button"</code> 以及元素 
		<code>&lt;button /&gt;</code> 默认以按钮方式呈现；此外，普通元素 
		<code>&lt;a /&gt;</code>、
		<code>&lt;label /&gt;</code> 等都可以和 
		<code>button</code> 一样以按钮方式呈现。
	</p>
	<div class="code">
		<div class="pre">
			<span class="elem">&lt;a</span>
			<span class="attr">class</span>=<span class="value">"mui-btn"</span><span class="elem">&gt;</span>
			链接
			<span class="elem">&lt;/a&gt;</span>
			<br />
			<span class="elem">&lt;button</span>
			<span class="attr">class</span>=<span class="value">"mui-btn"</span><span class="elem">&gt;</span>
			按钮
			<span class="elem">&lt;/button&gt;</span>
		</div>
		<div class="demo">
			<a href="javascript:void(0)" class="mui-btn mui-icon mui-icon-link">链接</a>
			<button>按钮</button>
		</div>
	</div>



	<h2>方法</h2>
	<p>令某个元素具有图标控件</p>
	<div class="code">
		<div class="pre">
			<span class="elem">&lt;a</span>
			<span class="attr">class</span>=<span class="value">"mui-icon mui-icon-home"</span><span class="elem">&gt;</span>
			链接
			<span class="elem">&lt;/a&gt;</span>
			<br />
			<span class="elem">&lt;button</span>
			<span class="attr">class</span>=<span class="value">"mui-icon mui-icon-home"</span><span class="elem">&gt;</span>
			按钮
			<span class="elem">&lt;/button&gt;</span>
		</div>
		<div class="demo">
			<a href="javascript:void(0)" class="mui-icon mui-icon-home">链接</a>
			<button class="mui-icon mui-icon-home">按钮</button>
		</div>
	</div>
	
	<h2>位置</h2>
	<p>设置图标相对于当前元素的位置，支持上、下、左、右、无文字</p>
	<div class="code">
		<div class="pre">
			<span class="elem">&lt;a</span>
			<span class="attr">class</span>=<span class="value">"mui-icon mui-icon-home"</span><span class="elem">&gt;</span>
			链接
			<span class="elem">&lt;/a&gt;</span>
			<br />
			<span class="elem">&lt;button</span>
			<span class="attr">class</span>=<span class="value">"mui-icon mui-icon-home"</span><span class="elem">&gt;</span>
			按钮
			<span class="elem">&lt;/button&gt;</span>
		</div>
		<div class="demo">
			<button class="mui-icon mui-icon-home mui-icon-t">上方/TOP</button>
			<button class="mui-icon mui-icon-home mui-icon-l">左边/LEFT</button>
			<button class="mui-icon mui-icon-home mui-icon-r">右侧/RIGHT</button>
			<button class="mui-icon mui-icon-home mui-icon-b">下面/BOTTOM</button>
			<button class="mui-icon mui-icon-home mui-icon-n">无文字/仅图标</button>
		</div>
	</div>

</div>
</body>
</html>